<template>
  <div class="app-container">
    <el-row :gutter="20">
      <el-col :span="5">
        <div style="margin-bottom: 20px">
          <el-input
            v-model="searchText"
            placeholder="请输入技术员姓名搜索内容"
            clearable
            @clear="getjsyList"
          >
            <el-button
              slot="append"
              type="primary"
              size="mini"
              @click="getjsyList"
              >搜索</el-button
            >
          </el-input>
        </div>
        <el-card>
          <div style="min-height: 50vh">
            <div v-if="jsyList.length">
              <div
                class="nh-item"
                v-for="item in jsyList"
                :key="item.jsyUserId"
                @click="getjsyData(item)"
              >
                {{ item.jsyxm }}
              </div>
            </div>
            <div v-else class="text-center">暂无数据</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="19">
        <el-card>
          <el-descriptions>
            <el-descriptions-item label="技术员编号">{{
              jsyItem.jsybh
            }}</el-descriptions-item>
            <el-descriptions-item label="技术员姓名">{{
              jsyItem.jsyxm
            }}</el-descriptions-item>
            <el-descriptions-item label="选择年度">
              <el-date-picker
                v-model="year"
                type="year"
                placeholder="请选择年度查询"
                size="small"
                format="yyyy"
                value-format="yyyy"
                @change="yearSearch"
              >
              </el-date-picker>
            </el-descriptions-item>
          </el-descriptions>
          <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="巡检记录" name="1"
              ><xjjl ref="xjjlRef" @getxjQk="getxjQk"
            /></el-tab-pane>
            <el-tab-pane label="日报记录" name="2"
              ><rbjl
                :qjData="rbjlData"
                @checkDetail="getRbDetail"
                @getQk="getQk"
                ref="rbjlRef"
            /></el-tab-pane>
            <el-tab-pane label="任务记录" name="3">
              <rwjl ref="rwjlRef" />
            </el-tab-pane>
            <el-tab-pane label="人工核算记录" name="4"
              ><rghsjl ref="rghsjlRef"
            /></el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
import xjjl from "./components/xjjl.vue";
import rbjl from "./components/rbjl.vue";
import rwjl from "./components/rwjl.vue";
import rghsjl from "./components/rghsjl.vue";
export default {
  components: { xjjl, rbjl, rwjl, rghsjl },
  data() {
    return {
      url: {
        jsyList: "/jtnc/jsydagl/krJsydagl/select",
        rbjl: "/jtnc/jsydagl/krJsydagl/listRbjl",
        xjjl: "/jtnc/jsydagl/krJsydagl/listXjjl",
      },
      jsyList: [],
      searchText: "",
      year: "",
      jsyItem: {},
      activeName: "1",
      rbjlData: [],
      month: "",
    };
  },
  created() {
    this.getjsyList();
    this.month = new Date().getMonth() + 1;
    this.year = new Date().getFullYear() + "";
  },
  methods: {
    // 技术员列表
    getjsyList() {
      request({
        url: this.url.jsyList,
        method: "get",
        params: {
          jsyxm: this.searchText,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.jsyList = res.data;
        }
      });
    },
    getjsyData(item) {
      if (item) {
        this.jsyItem = item;
      }
      this.getRbjl();
      this.$nextTick(() => {
        this.$refs.rwjlRef.getTaskRecord({
          jsyId: this.jsyItem.jsyId,
          year: this.year,
        });
        this.$refs.rghsjlRef.getRghs({
          jsyId: this.jsyItem.jsyId,
          year: this.year,
        });
        this.$refs.xjjlRef.getXjjl({
          jsyId: this.jsyItem.jsyId,
          year: this.year,
          month: this.month,
        });
      });
    },
    selectYear() {},
    getQk(month) {
      this.month = month;
      this.getRbjl();
    },
    getxjQk(month) {
      this.month = month;
      this.$nextTick(() => {
        this.$refs.xjjlRef.getXjjl({
          jsyId: this.jsyItem.jsyId,
          year: this.year,
          month: this.month,
        });
      });
    },
    // 日报记录
    getRbjl() {
      if (!this.jsyItem?.jsyId) {
        this.$message.error("请先选择技术员");
        return;
      }
      request({
        url: this.url.rbjl,
        method: "get",
        params: {
          jsyId: this.jsyItem.jsyId,
          year: this.year,
          month: this.month,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.rbjlData = res.data;
        }
      });
    },

    // 获取日报详情
    getRbDetail(item) {
      if (!this.jsyItem?.jsyId) {
        this.$message.error("请先选择技术员");
        return;
      }
      request({
        url: "/jtnc/jsydagl/krJsydagl/getRbxq",
        method: "get",
        params: {
          jsyId: this.jsyItem.jsyId,
          rbsj: item,
        },
      }).then((res) => {
        if (res.code == 200) {
          this.$nextTick(() => {
            this.$refs.rbjlRef.openRbDialog(res.data);
          });
        }
      });
    },
    yearSearch(val) {
      this.$refs.xjjlRef.setDate(val);
      this.$refs.rbjlRef.setDate(val);
      this.getjsyData();
    },
  },
};
</script>

<style lang="scss" scoped>
.nh-item {
  text-align: center;
  margin-bottom: 15px;
  cursor: pointer;
}
</style>
